<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Intersection Observer</title>
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet">
  <link href="https://www.w3.org/TR/intersection-observer/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Intersection Observer</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/IntersectionObserver/">https://w3c.github.io/IntersectionObserver/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/intersection-observer/">https://www.w3.org/TR/intersection-observer/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2019/WD-intersection-observer-20190530/" rel="prev">https://www.w3.org/TR/2019/WD-intersection-observer-20190530/</a>
     <dt>Test Suite:
     <dd><a href="http://w3c-test.org/intersection-observer/">http://w3c-test.org/intersection-observer/</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="91208"><a class="p-name fn u-email email" href="mailto:szager@google.com">Stefan Zager</a> (<span class="p-org org">Google</span>)
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="73819"><a class="p-name fn u-email email" href="mailto:mpb@google.com">Michael Blain</a> (<span class="p-org org">Google</span>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes  an API that can be used to understand the visibility and position of DOM elements ("targets") relative to a containing element or to the top-level viewport ("root"). The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at https://www.w3.org/TR/.</em> </p>
   <p> This document was published by the <a href="https://www.w3.org/2019/webapps/">Web Applications Working Group</a> as an Editors Draft. This document is intended to become a W3C Recommendation. </p>
   <p></p>
   <p> This document was published by the <a href="https://www.w3.org/2019/webapps/">Web Applications Working Group</a> as a Working Draft.

    Feedback and comments on this specification are welcome. Please use <a href="https://github.com/W3C/IntersectionObserver/issues">GitHub issues</a> Historical discussions can be found in the <a href="https://lists.w3.org/Archives/Public/public-webapps/">public-webapps@w3.org archives</a>. </p>
   <p> Publication as an Editors Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
    be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress. </p>
   <p> This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/"><abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/114929/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p>This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#intersection-observer-api"><span class="secno">2</span> <span class="content">Intersection Observer</span></a>
     <ol class="toc">
      <li><a href="#intersection-observer-callback"><span class="secno">2.1</span> <span class="content"> The IntersectionObserverCallback</span></a>
      <li><a href="#intersection-observer-interface"><span class="secno">2.2</span> <span class="content"> The IntersectionObserver interface</span></a>
      <li><a href="#intersection-observer-entry"><span class="secno">2.3</span> <span class="content"> The IntersectionObserverEntry interface</span></a>
      <li><a href="#intersection-observer-init"><span class="secno">2.4</span> <span class="content"> The IntersectionObserverInit dictionary</span></a>
     </ol>
    <li>
     <a href="#intersection-observer-processing-model"><span class="secno">3</span> <span class="content"> Processing Model</span></a>
     <ol class="toc">
      <li>
       <a href="#defines"><span class="secno">3.1</span> <span class="content"> Internal Slot Definitions</span></a>
       <ol class="toc">
        <li><a href="#document-defines"><span class="secno">3.1.1</span> <span class="content"> Document</span></a>
        <li><a href="#element-private-slots"><span class="secno">3.1.2</span> <span class="content"> Element</span></a>
        <li><a href="#intersection-observer-private-slots"><span class="secno">3.1.3</span> <span class="content"> IntersectionObserver</span></a>
       </ol>
      <li>
       <a href="#algorithms"><span class="secno">3.2</span> <span class="content"> Algorithms</span></a>
       <ol class="toc">
        <li><a href="#queue-intersection-observer-task"><span class="secno">3.2.1</span> <span class="content"> Queue an Intersection Observer Task</span></a>
        <li><a href="#notify-intersection-observers-algo"><span class="secno">3.2.2</span> <span class="content"> Notify Intersection Observers</span></a>
        <li><a href="#queue-intersection-observer-entry-algo"><span class="secno">3.2.3</span> <span class="content"> Queue an IntersectionObserverEntry</span></a>
        <li><a href="#calculate-intersection-rect-algo"><span class="secno">3.2.4</span> <span class="content"> Compute the Intersection of a Target Element and the Root</span></a>
        <li><a href="#update-intersection-observations-algo"><span class="secno">3.2.5</span> <span class="content"> Run the Update Intersection Observations Steps</span></a>
       </ol>
      <li><a href="#lifetime"><span class="secno">3.3</span> <span class="content"> IntersectionObserver Lifetime</span></a>
      <li>
       <a href="#external-spec-integrations"><span class="secno">3.4</span> <span class="content"> External Spec Integrations</span></a>
       <ol class="toc">
        <li><a href="#event-loop"><span class="secno">3.4.1</span> <span class="content"> HTML Processing Model: Event Loop</span></a>
       </ol>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">4</span> <span class="content">Acknowledgements</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content">Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content">Document conventions</span></a>
      <li><a href="#conformant-algorithms"><span class="secno"></span> <span class="content">Conformant Algorithms</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p>The web’s traditional position calculation mechanisms
rely on explicit queries of DOM state
that are known to cause (expensive) style recalculation and layout
and, frequently, are a source of significant performance overhead
due to continuous polling for this information.</p>
   <p>A body of common practice has evolved that relies on these behaviors,
however, including (but not limited to):</p>
   <ul>
    <li data-md>
     <p>Building custom pre- and deferred-loading of DOM and data.</p>
    <li data-md>
     <p>Implementing data-bound high-performance scrolling lists
which load and render subsets of data sets.
These lists are a central mobile interaction idiom.</p>
    <li data-md>
     <p>Calculating element visibility.
In particular, <a href="http://www.iab.net/iablog/2014/03/viewability-has-arrived-what-you-need-to-know-to-see-through-this-sea-change.html"> ad networks now require reporting of ad "visibility" for monetizing impressions</a>. This has led to many sites abusing scroll handlers
(causing jank on scroll), <a href="http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html"> synchronous layout invoking readbacks</a> (causing unnecessary critical work in rAF loops),
and resorting to exotic plugin-based solutions for computing "true" element visibility (with all the associated overhead of the plugin architecture).</p>
   </ul>
   <p>These use-cases have several common properties:</p>
   <ol>
    <li data-md>
     <p>They can be represented as passive "queries"
about the state of individual elements
with respect to some other element
(or the global viewport).</p>
    <li data-md>
     <p>They do not impose hard latency requirements;
that is to say, the information can be delivered asynchronously
(e.g. from another thread)
without penalty.</p>
    <li data-md>
     <p>They are poorly supported by nearly all combinations of existing web platform features,
requiring extraordinary developer effort despite their widespread use.</p>
   </ol>
   <p>A notable non-goal is pixel-accurate information about what was actually displayed
(which can be quite difficult to obtain efficiently in certain browser architectures
in the face of filters, webgl, and other features).
In all of these scenarios the information is useful
even when delivered at a slight delay
and without perfect compositing-result data.</p>
   <p>The Intersection Observer API addresses the above issues
by giving developers a new method to asynchronously query the position of an element
with respect to other elements or the global viewport.
The asynchronous delivery eliminates the need for costly DOM and style queries,
continuous polling,
and use of custom plugins.
By removing the need for these methods
it allows applications to significantly reduce their CPU, GPU and energy costs.</p>
   <div class="example" id="example-189ac2d4">
    <a class="self-link" href="#example-189ac2d4"></a> 
<pre class="highlight"><c- a>var</c-> observer <c- o>=</c-> <c- k>new</c-> IntersectionObserver<c- p>(</c->changes <c- p>=></c-> <c- p>{</c->
  <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> change <c- k>of</c-> changes<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->time<c- p>);</c->               <c- c1>// Timestamp when the change occurred</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->rootBounds<c- p>);</c->         <c- c1>// Unclipped area of root</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->boundingClientRect<c- p>);</c-> <c- c1>// target.boundingClientRect()</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->intersectionRect<c- p>);</c->   <c- c1>// boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->intersectionRatio<c- p>);</c->  <c- c1>// Ratio of intersectionRect area to boundingClientRect area</c->
    console<c- p>.</c->log<c- p>(</c->change<c- p>.</c->target<c- p>);</c->             <c- c1>// the Element target</c->
  <c- p>}</c->
<c- p>},</c-> <c- p>{});</c->

<c- c1>// Watch for intersection events on a specific target Element.</c->
observer<c- p>.</c->observe<c- p>(</c->target<c- p>);</c->

<c- c1>// Stop watching for intersection events on a specific target Element.</c->
observer<c- p>.</c->unobserve<c- p>(</c->target<c- p>);</c->

<c- c1>// Stop observing threshold events on all target elements.</c->
observer<c- p>.</c->disconnect<c- p>();</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="2" id="intersection-observer-api"><span class="secno">2. </span><span class="content">Intersection Observer</span><a class="self-link" href="#intersection-observer-api"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="intersection-observer">Intersection Observer</dfn> API enables developers to understand the
visibility and position of <dfn class="dfn-paneled" data-dfn-for="IntersectionObserver" data-dfn-type="dfn" data-noexport id="intersectionobserver-target">target</dfn> DOM
elements relative to an <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root">intersection root</a>.</p>
   <h3 class="heading settled" data-level="2.1" id="intersection-observer-callback"><span class="secno">2.1. </span><span class="content"> The IntersectionObserverCallback</span><a class="self-link" href="#intersection-observer-callback"></a></h3>
<pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-intersectionobservercallback"><code><c- g>IntersectionObserverCallback</c-></code></dfn> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry"><c- n>IntersectionObserverEntry</c-></a>> <dfn class="idl-code" data-dfn-for="IntersectionObserverCallback" data-dfn-type="argument" data-export id="dom-intersectionobservercallback-entries"><code><c- g>entries</c-></code><a class="self-link" href="#dom-intersectionobservercallback-entries"></a></dfn>, <a class="n" data-link-type="idl-name" href="#intersectionobserver" id="ref-for-intersectionobserver"><c- n>IntersectionObserver</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverCallback" data-dfn-type="argument" data-export id="dom-intersectionobservercallback-observer"><code><c- g>observer</c-></code><a class="self-link" href="#dom-intersectionobservercallback-observer"></a></dfn>);
</pre>
   <p>This callback will be invoked when there are changes to <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target">target</a>’s
intersection with the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①">intersection root</a>, as per the <a data-link-type="dfn" href="#intersection-observer-processing-model" id="ref-for-intersection-observer-processing-model">processing model</a>.</p>
   <h3 class="heading settled" data-level="2.2" id="intersection-observer-interface"><span class="secno">2.2. </span><span class="content"> The IntersectionObserver interface</span><a class="self-link" href="#intersection-observer-interface"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①">IntersectionObserver</a></code> interface can be used to observe changes in the
intersection of an <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root②">intersection root</a> and one or more <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target①">target</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element">Element</a></code>s.</p>
   <p>An <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver②">IntersectionObserver</a></code> with a <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root">root</a></code> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code> can
observe any <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target②">target</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> that is a descendant of the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root①">root</a></code> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display/#containing-block-chain" id="ref-for-containing-block-chain">containing block chain</a>.</p>
   <p>An <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver③">IntersectionObserver</a></code> with no <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root②">root</a></code> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> will automatically observe intersections with the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root">implicit root</a>,
and valid <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target③">targets</a> include any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④">Element</a></code> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a>, as well as any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code> in any <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts">nested browsing contexts</a> inside the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context①">top-level browsing context</a>.</p>
   <p class="note" role="note"><span>Note:</span> In <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#mutationobserver" id="ref-for-mutationobserver">MutationObserver</a></code>, the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dictdef-mutationobserverinit" id="ref-for-dictdef-mutationobserverinit">MutationObserverInit</a></code> options are passed
to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-mutationobserver-observe" id="ref-for-dom-mutationobserver-observe">observe()</a></code> while in <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver④">IntersectionObserver</a></code> they are
passed to the constructor. This is because for MutationObserver, each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node">Node</a></code> being observed could have a different set of attributes to filter for. For <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver⑤">IntersectionObserver</a></code>, developers may choose to use a single observer to
track multiple targets using the same set of options; or they may use a different
observer for each tracked target.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverinit-rootmargin" id="ref-for-dom-intersectionobserverinit-rootmargin">rootMargin</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverinit-threshold" id="ref-for-dom-intersectionobserverinit-threshold">threshold</a></code> values for each <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target④">target</a> seems to introduce more complexity without solving additional
use-cases. Per-<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observe" id="ref-for-dom-intersectionobserver-observe">observe()</a></code> options could be provided in the future if V2
introduces a need for it.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="constructor" href="#dom-intersectionobserver-intersectionobserver" id="ref-for-dom-intersectionobserver-intersectionobserver"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-intersectionobservercallback" id="ref-for-callbackdef-intersectionobservercallback"><c- n>IntersectionObserverCallback</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserver/IntersectionObserver(callback, options)" data-dfn-type="argument" data-export id="dom-intersectionobserver-intersectionobserver-callback-options-callback"><code><c- g>callback</c-></code><a class="self-link" href="#dom-intersectionobserver-intersectionobserver-callback-options-callback"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-intersectionobserverinit" id="ref-for-dictdef-intersectionobserverinit"><c- n>IntersectionObserverInit</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserver/IntersectionObserver(callback, options)" data-dfn-type="argument" data-export id="dom-intersectionobserver-intersectionobserver-callback-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-intersectionobserver-intersectionobserver-callback-options-options"></a></dfn>),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="intersectionobserver"><code><c- g>IntersectionObserver</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root③"><c- g>root</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-intersectionobserver-rootmargin" id="ref-for-dom-intersectionobserver-rootmargin"><c- g>rootMargin</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<double>" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds"><c- g>thresholds</c-></a>;
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-observe" id="ref-for-dom-intersectionobserver-observe①"><c- g>observe</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserver/observe(target)" data-dfn-type="argument" data-export id="dom-intersectionobserver-observe-target-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-intersectionobserver-observe-target-target"></a></dfn>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-unobserve" id="ref-for-dom-intersectionobserver-unobserve"><c- g>unobserve</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserver/unobserve(target)" data-dfn-type="argument" data-export id="dom-intersectionobserver-unobserve-target-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-intersectionobserver-unobserve-target-target"></a></dfn>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-disconnect" id="ref-for-dom-intersectionobserver-disconnect"><c- g>disconnect</c-></a>();
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry①"><c- n>IntersectionObserverEntry</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-takerecords" id="ref-for-dom-intersectionobserver-takerecords"><c- g>takeRecords</c-></a>();
};
</pre>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="constructor" data-export data-lt="IntersectionObserver(callback, options)|IntersectionObserver(callback)" id="dom-intersectionobserver-intersectionobserver"><code> new IntersectionObserver(callback, options)</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Let <var>this</var> be a new <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver⑥">IntersectionObserver</a></code> object</p>
       <li data-md>
        <p>Set <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-callback-slot" id="ref-for-dom-intersectionobserver-callback-slot">[[callback]]</a></code> slot to <var>callback</var>.</p>
       <li data-md>
        <p>Set <var>this</var>.<var>root</var> to <var>options</var>.<var>root</var>.</p>
       <li data-md>
        <p>Attempt to <a data-link-type="dfn" href="#parse-a-root-margin" id="ref-for-parse-a-root-margin">parse a root margin</a> from <var>options</var>.<var>rootMargin</var>.
If a list is returned,
set <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin-slot" id="ref-for-dom-intersectionobserver-rootmargin-slot">[[rootMargin]]</a></code> slot to that.
Otherwise, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dfn-simple-exception" id="ref-for-dfn-simple-exception">SyntaxError</a></code> exception.</p>
       <li data-md>
        <p>Let <var>thresholds</var> be a list equal to <var>options</var>.<var>threshold</var>.</p>
       <li data-md>
        <p>If any value in <var>thresholds</var> is less than 0.0 or greater than
1.0, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dfn-simple-exception" id="ref-for-dfn-simple-exception①">RangeError</a></code> exception.</p>
       <li data-md>
        <p>Sort <var>thresholds</var> in ascending order.</p>
       <li data-md>
        <p>If <var>thresholds</var> is empty, append <code>0</code> to <var>thresholds</var>.</p>
       <li data-md>
        <p>Set <var>this</var>.<var>thresholds</var> to <var>thresholds</var>.</p>
       <li data-md>
        <p>Return <var>this</var>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="method" data-export id="dom-intersectionobserver-observe"><code>observe(target)</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>If <var>target</var> is in <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot">[[ObservationTargets]]</a></code> slot,
return.</p>
       <li data-md>
        <p>Let <var>intersectionObserverRegistration</var> be
an <code class="idl"><a data-link-type="idl" href="#intersectionobserverregistration" id="ref-for-intersectionobserverregistration">IntersectionObserverRegistration</a></code> record
with an <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-observer" id="ref-for-dom-intersectionobserverregistration-observer">observer</a></code> property set to <var>this</var>,
a <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousthresholdindex" id="ref-for-dom-intersectionobserverregistration-previousthresholdindex">previousThresholdIndex</a></code> property set to <code>-1</code>,
and a <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousisintersecting" id="ref-for-dom-intersectionobserverregistration-previousisintersecting">previousIsIntersecting</a></code> property set to <code>false</code>.</p>
       <li data-md>
        <p>Append <var>intersectionObserverRegistration</var> to <var>target</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-element-registeredintersectionobservers-slot" id="ref-for-dom-element-registeredintersectionobservers-slot">[[RegisteredIntersectionObservers]]</a></code> slot.</p>
       <li data-md>
        <p>Add <var>target</var> to <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot①">[[ObservationTargets]]</a></code> slot.</p>
       <li data-md>
        <p>Schedule an iteration of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop">event loop</a> in the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root④">root</a></code>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a>.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="method" data-export id="dom-intersectionobserver-unobserve"><code>unobserve(target)</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Remove the <code class="idl"><a data-link-type="idl" href="#intersectionobserverregistration" id="ref-for-intersectionobserverregistration①">IntersectionObserverRegistration</a></code> record
whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-observer" id="ref-for-dom-intersectionobserverregistration-observer①">observer</a></code> property is equal to <var>this</var> from <var>target</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-element-registeredintersectionobservers-slot" id="ref-for-dom-element-registeredintersectionobservers-slot①">[[RegisteredIntersectionObservers]]</a></code> slot.</p>
       <li data-md>
        <p>Remove <var>target</var> from <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot②">[[ObservationTargets]]</a></code> slot.</p>
      </ol>
      <p class="note" role="note"><span>Note:</span> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#mutationobserver" id="ref-for-mutationobserver①">MutationObserver</a></code> does not implement <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-unobserve" id="ref-for-dom-intersectionobserver-unobserve①">unobserve()</a></code>.
For <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver⑦">IntersectionObserver</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-unobserve" id="ref-for-dom-intersectionobserver-unobserve②">unobserve()</a></code> addresses the
lazy-loading use case. After <var>target</var> becomes visible,
it does not need to be tracked.
It would be more work to either <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-disconnect" id="ref-for-dom-intersectionobserver-disconnect①">disconnect()</a></code> all <var>target</var>s
and <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observe" id="ref-for-dom-intersectionobserver-observe②">observe()</a></code> the remaining ones,
or create a separate <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver⑧">IntersectionObserver</a></code> for each <var>target</var>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="method" data-export id="dom-intersectionobserver-disconnect"><code>disconnect()</code></dfn>
     <dd data-md>
      <p>For each <var>target</var> in <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot③">[[ObservationTargets]]</a></code> slot:</p>
      <ol>
       <li data-md>
        <p>Remove the <code class="idl"><a data-link-type="idl" href="#intersectionobserverregistration" id="ref-for-intersectionobserverregistration②">IntersectionObserverRegistration</a></code> record
whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-observer" id="ref-for-dom-intersectionobserverregistration-observer②">observer</a></code> property is equal to <var>this</var> from <var>target</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-element-registeredintersectionobservers-slot" id="ref-for-dom-element-registeredintersectionobservers-slot②">[[RegisteredIntersectionObservers]]</a></code> slot.</p>
       <li data-md>
        <p>Remove <var>target</var> from <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot④">[[ObservationTargets]]</a></code> slot.</p>
      </ol>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="method" data-export id="dom-intersectionobserver-takerecords"><code>takeRecords()</code></dfn>
     <dd data-md>
      <ol>
       <li data-md>
        <p>Let <var>queue</var> be a copy of <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot">[[QueuedEntries]]</a></code> slot.</p>
       <li data-md>
        <p>Clear <var>this</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot①">[[QueuedEntries]]</a></code> slot.</p>
       <li data-md>
        <p>Return <var>queue</var>.</p>
      </ol>
    </dl>
   </div>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-root"><code>root</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨">Element</a>, readonly, nullable</span>
     <dd data-md>
      <p>The root <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⓪">Element</a></code> to use for intersection, or <code>null</code> if the
observer uses the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root①">implicit root</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-rootmargin"><code>rootMargin</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a>, readonly</span>
     <dd data-md>
      <p>Offsets applied to the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root③">intersection root’s</a> bounding box,
effectively growing or shrinking the box that is used to calculate intersections.
Note that <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin" id="ref-for-dom-intersectionobserver-rootmargin①">rootMargin</a></code> is only applied
for <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target⑤">targets</a> which belong to the same <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts">unit of related similar-origin browsing contexts</a> as the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root④">intersection root</a>.</p>
      <p>On getting, return the result of serializing the elements of <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin-slot" id="ref-for-dom-intersectionobserver-rootmargin-slot①">[[rootMargin]]</a></code> space-separated, where pixel lengths serialize as the numeric value followed by "px",
and percentages serialize as the numeric value followed by "%".  Note that
this is not guaranteed to be identical to the <var>options</var>.<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverinit-rootmargin" id="ref-for-dom-intersectionobserverinit-rootmargin①">rootMargin</a></code> passed to the <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver⑨">IntersectionObserver</a></code> constructor.  If no <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverinit-rootmargin" id="ref-for-dom-intersectionobserverinit-rootmargin②">rootMargin</a></code> was passed to the <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⓪">IntersectionObserver</a></code> constructor, the value of this attribute is "0px 0px 0px 0px".</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-thresholds"><code>thresholds</code></dfn>, <span> of type FrozenArray&lt;<a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①">double</a>>, readonly</span>
     <dd data-md>
      <p>A list of thresholds, sorted in increasing numeric order,
where each threshold is a ratio of intersection area to bounding box area
of an observed target.  Notifications for a target are generated when any
of the thresholds are crossed for that target.
If no <var>options</var>.<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverinit-threshold" id="ref-for-dom-intersectionobserverinit-threshold①">threshold</a></code> was provided to the <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①①">IntersectionObserver</a></code> constructor, the value of this attribute will be [0].</p>
    </dl>
   </div>
   <p>The <dfn class="dfn-paneled" data-dfn-for="IntersectionObserver" data-dfn-type="dfn" data-noexport id="intersectionobserver-intersection-root">intersection root</dfn> for an <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①②">IntersectionObserver</a></code> is the value of its <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root⑤">root</a></code> attribute,
or else the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context②">top-level browsing context</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object">document</a> node
(referred to as the <dfn class="dfn-paneled" data-dfn-for="IntersectionObserver" data-dfn-type="dfn" data-noexport id="intersectionobserver-implicit-root">implicit root</dfn>) if
the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root⑥">root</a></code> attribute is <code>null</code>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-for="IntersectionObserver" data-dfn-type="dfn" data-noexport id="intersectionobserver-root-intersection-rectangle">root intersection rectangle</dfn> for an <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①③">IntersectionObserver</a></code> is the rectangle we’ll use to check against the targets.</p>
   <dl class="switch">
    <dt>If the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root⑤">intersection root</a> is the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root②">implicit root</a>, 
    <dd>it’s the viewport’s size. 
    <dt>If the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root⑥">intersection root</a> has an overflow clip, 
    <dd>it’s the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box/#content-area" id="ref-for-content-area">content area</a>. 
    <dt>Otherwise, 
    <dd>it’s the result of running the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect">getBoundingClientRect()</a></code> algorithm on the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root⑦">intersection root</a>. 
   </dl>
   <p>For any <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target⑥">target</a> which belongs to the same <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts①">unit of related similar-origin browsing contexts</a> as the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root⑧">intersection root</a>,
the rectangle is then expanded
according to the offsets in the <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①④">IntersectionObserver</a></code>’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin-slot" id="ref-for-dom-intersectionobserver-rootmargin-slot②">[[rootMargin]]</a></code> slot
in a manner similar to CSS’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin">margin</a> property,
with the four values indicating the amount the top, right, bottom, and left edges, respectively, are offset by,
with positive lengths indicating an outward offset.
Percentages are resolved relative to the width of the undilated rectangle.</p>
   <p class="note" role="note"><span>Note:</span> <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin" id="ref-for-dom-intersectionobserver-rootmargin②">rootMargin</a></code> only applies to the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root⑨">intersection root</a> itself.
If a <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target⑦">target</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①①">Element</a></code> is clipped by an ancestor other than the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⓪">intersection root</a>, that clipping is unaffected by <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-rootmargin" id="ref-for-dom-intersectionobserver-rootmargin③">rootMargin</a></code>.</p>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle">Root intersection rectangle</a> is not affected by <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#pinch-zoom" id="ref-for-pinch-zoom">pinch zoom</a> and will report the unadjusted <a data-link-type="dfn" href="https://drafts.csswg.org/css-box/#viewport" id="ref-for-viewport">viewport</a>, consistent with the
intent of pinch zooming (to act like a magnifying glass and NOT change layout.)</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parse-a-root-margin">parse a root margin</dfn> from an input string <var>marginString</var>,
returning either a list of 4 pixel lengths or percentages,
or failure:</p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-a-list-of-component-values" id="ref-for-parse-a-list-of-component-values">Parse a list of component values</a> <var>marginString</var>,
storing the result as <var>tokens</var>.</p>
    <li data-md>
     <p>Remove all whitespace tokens from <var>tokens</var>.</p>
    <li data-md>
     <p>If the length of <var>tokens</var> is 0 or greater than 4,
return failure.</p>
    <li data-md>
     <p>Replace each <var>token</var> in <var>tokens</var>:</p>
     <ul>
      <li data-md>
       <p>If <var>token</var> is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-3/#absolute-length" id="ref-for-absolute-length">absolute length</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-3/#dimension" id="ref-for-dimension">dimension</a> token,
replace it with a an equivalent pixel length.</p>
      <li data-md>
       <p>If <var>token</var> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a> token,
replace it with an equivalent percentage.</p>
      <li data-md>
       <p>Otherwise, return failure.</p>
     </ul>
    <li data-md>
     <p>If there is one element in <var>tokens</var>,
append three duplicates of that element to <var>tokens</var>.
If there is two elements are <var>tokens</var>,
append a duplicate of each element to <var>tokens</var>.
If there are three elements in <var>tokens</var>,
append a duplicate of the second element to <var>tokens</var>.</p>
    <li data-md>
     <p>Return <var>tokens</var>.</p>
   </ol>
   <h3 class="heading settled" data-level="2.3" id="intersection-observer-entry"><span class="secno">2.3. </span><span class="content"> The IntersectionObserverEntry interface</span><a class="self-link" href="#intersection-observer-entry"></a></h3>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="constructor" data-export data-lt="IntersectionObserverEntry(intersectionObserverEntryInit)" id="dom-intersectionobserverentry-intersectionobserverentry"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-intersectionobserverentry-intersectionobserverentry"></a></dfn>(<a class="n" data-link-type="idl-name" href="#dictdef-intersectionobserverentryinit" id="ref-for-dictdef-intersectionobserverentryinit"><c- n>IntersectionObserverEntryInit</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntry/IntersectionObserverEntry(intersectionObserverEntryInit)" data-dfn-type="argument" data-export id="dom-intersectionobserverentry-intersectionobserverentry-intersectionobserverentryinit-intersectionobserverentryinit"><code><c- g>intersectionObserverEntryInit</c-></code><a class="self-link" href="#dom-intersectionobserverentry-intersectionobserverentry-intersectionobserverentryinit-intersectionobserverentryinit"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="intersectionobserverentry"><code><c- g>IntersectionObserverEntry</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-intersectionobserverentry-time" id="ref-for-dom-intersectionobserverentry-time"><c- g>time</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly?" href="#dom-intersectionobserverentry-rootbounds" id="ref-for-dom-intersectionobserverentry-rootbounds"><c- g>rootBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect"><c- g>boundingClientRect</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-intersectionobserverentry-intersectionrect" id="ref-for-dom-intersectionobserverentry-intersectionrect"><c- g>intersectionRect</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-intersectionobserverentry-isintersecting" id="ref-for-dom-intersectionobserverentry-isintersecting"><c- g>isIntersecting</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-intersectionobserverentry-intersectionratio" id="ref-for-dom-intersectionobserverentry-intersectionratio"><c- g>intersectionRatio</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target"><c- g>target</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-intersectionobserverentryinit"><code><c- g>IntersectionObserverEntryInit</c-></code></dfn> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMHighResTimeStamp " id="dom-intersectionobserverentryinit-time"><code><c- g>time</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-time"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit"><c- n>DOMRectInit</c-></a>? <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMRectInit? " id="dom-intersectionobserverentryinit-rootbounds"><code><c- g>rootBounds</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-rootbounds"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMRectInit " id="dom-intersectionobserverentryinit-boundingclientrect"><code><c- g>boundingClientRect</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-boundingclientrect"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit②"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="DOMRectInit " id="dom-intersectionobserverentryinit-intersectionrect"><code><c- g>intersectionRect</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-intersectionrect"></a></dfn>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-intersectionobserverentryinit-isintersecting"><code><c- g>isIntersecting</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-isintersecting"></a></dfn>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="double " id="dom-intersectionobserverentryinit-intersectionratio"><code><c- g>intersectionRatio</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-intersectionratio"></a></dfn>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①③"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="IntersectionObserverEntryInit" data-dfn-type="dict-member" data-export data-type="Element " id="dom-intersectionobserverentryinit-target"><code><c- g>target</c-></code><a class="self-link" href="#dom-intersectionobserverentryinit-target"></a></dfn>;
};
</pre>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-boundingclientrect"><code>boundingClientRect</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly③">DOMRectReadOnly</a>, readonly</span>
     <dd data-md>
      <p>A <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly④">DOMRectReadOnly</a></code> obtained by running the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect①">getBoundingClientRect()</a></code> algorithm
on the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target①">target</a></code>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-intersectionrect"><code>intersectionRect</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly⑤">DOMRectReadOnly</a>, readonly</span>
     <dd data-md>
      <p><code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect①">boundingClientRect</a></code>, intersected by
each of <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target②">target</a></code>'s ancestors' clip
rects (up to but not including <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root⑦">root</a></code>),
intersected with the <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle①">root intersection rectangle</a>.
This value represents the portion of <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target③">target</a></code> actually visible
within the <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle②">root intersection rectangle</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-isintersecting"><code>isIntersecting</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②">boolean</a>, readonly</span>
     <dd data-md>
      <p>True if the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target④">target</a></code> intersects with the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root⑧">root</a></code>; false otherwise.  This flag makes it
possible to distinguish between an <code class="idl"><a data-link-type="idl" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry②">IntersectionObserverEntry</a></code> signalling
the transition from intersecting to not-intersecting; and an <code class="idl"><a data-link-type="idl" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry③">IntersectionObserverEntry</a></code> signalling a transition from not-intersecting
to intersecting with a zero-area intersection rect (as will happen with
edge-adjacent intersections, or when the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect②">boundingClientRect</a></code> has zero area).</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-intersectionratio"><code>intersectionRatio</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④">double</a>, readonly</span>
     <dd data-md>
      <p>If the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect③">boundingClientRect</a></code> has non-zero area,
this will be the ratio of <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-intersectionrect" id="ref-for-dom-intersectionobserverentry-intersectionrect①">intersectionRect</a></code> area to <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect④">boundingClientRect</a></code> area.  Otherwise, this will be
1 if the <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-isintersecting" id="ref-for-dom-intersectionobserverentry-isintersecting①">isIntersecting</a></code> is true, and 0 if not.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-rootbounds"><code>rootBounds</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly⑥">DOMRectReadOnly</a>, readonly, nullable</span>
     <dd data-md>
      <p>If <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target⑤">target</a></code> belongs to the same <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#unit-of-related-similar-origin-browsing-contexts" id="ref-for-unit-of-related-similar-origin-browsing-contexts②">unit of related similar-origin browsing contexts</a> as the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①①">intersection root</a>,
this will be the <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle③">root intersection rectangle</a>.
Otherwise, this will be <code>null</code>.
Note that if the target is in a different <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①">browsing context</a> than the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①②">intersection root</a>,
this will be in a different coordinate system
than <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect⑤">boundingClientRect</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverentry-intersectionrect" id="ref-for-dom-intersectionobserverentry-intersectionrect②">intersectionRect</a></code>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-target"><code>target</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①④">Element</a>, readonly</span>
     <dd data-md>
      <p>The <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑤">Element</a></code> whose intersection with the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①③">intersection root</a> changed.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverEntry" data-dfn-type="attribute" data-export id="dom-intersectionobserverentry-time"><code>time</code></dfn>, <span> of type <a data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp②">DOMHighResTimeStamp</a>, readonly</span>
     <dd data-md>
      <p>The attribute must return a <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp③">DOMHighResTimeStamp</a></code> that corresponds to the time the intersection was recorded, relative to the <a data-link-type="dfn" href="http://www.w3.org/TR/hr-time/#time-origin" id="ref-for-time-origin">time origin</a> of the global object associated with the IntersectionObserver instance
that generated the notification.</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="2.4" id="intersection-observer-init"><span class="secno">2.4. </span><span class="content"> The IntersectionObserverInit dictionary</span><a class="self-link" href="#intersection-observer-init"></a></h3>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-intersectionobserverinit"><code><c- g>IntersectionObserverInit</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑥"><c- n>Element</c-></a>?  <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="Element?  " href="#dom-intersectionobserverinit-root" id="ref-for-dom-intersectionobserverinit-root"><c- g>root</c-></a> = <c- b>null</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;0px&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-intersectionobserverinit-rootmargin" id="ref-for-dom-intersectionobserverinit-rootmargin③"><c- g>rootMargin</c-></a> = "0px";
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a>>) <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="(double or sequence<double>) " href="#dom-intersectionobserverinit-threshold" id="ref-for-dom-intersectionobserverinit-threshold②"><c- g>threshold</c-></a> = 0;
};
</pre>
   <div>
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverInit" data-dfn-type="dict-member" data-export id="dom-intersectionobserverinit-root"><code>root</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑦">Element</a>, nullable, defaulting to <code>null</code></span>
     <dd data-md>
      <p>The <var>root</var> to use for intersection.
If not provided, use the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root③">implicit root</a>.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverInit" data-dfn-type="dict-member" data-export id="dom-intersectionobserverinit-rootmargin"><code>rootMargin</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a>, defaulting to <code>"0px"</code></span>
     <dd data-md>
      <p>Similar to the CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin" id="ref-for-propdef-margin①">margin</a> property,
this is a string of 1-4 components,
each either an <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-3/#absolute-length" id="ref-for-absolute-length①">absolute length</a> or a percentage.</p>
<pre class="example highlight" id="example-105651ff"><a class="self-link" href="#example-105651ff"></a><c- u>"5px"</c->                <c- c1>// all margins set to 5px</c->
<c- u>"5px 10px"</c->           <c- c1>// top &amp; bottom = 5px, right &amp; left = 10px</c->
<c- u>"-10px 5px 8px"</c->      <c- c1>// top = -10px, right &amp; left = 5px, bottom = 8px</c->
<c- u>"-10px -5px 5px 8px"</c-> <c- c1>// top = -10px, right = -5px, bottom = 5px, left = 8px</c->
</pre>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverInit" data-dfn-type="dict-member" data-export id="dom-intersectionobserverinit-threshold"><code>threshold</code></dfn>, <span> of type <code class="idl-code">(double or sequence&lt;double>)</code>, defaulting to <code>0</code></span>
     <dd data-md>
      <p>List of threshold(s) at which to trigger callback.
callback will be invoked when intersectionRect’s area changes from
greater than or equal to any threshold to less than that threshold,
and vice versa.</p>
      <p>Threshold values must be in the range of [0, 1.0] and represent a
percentage of the area of the rectangle produced
by running the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect②">getBoundingClientRect()</a></code> algorithm
on the <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target⑧">target</a>.</p>
      <p class="note" role="note"><span>Note:</span> 0.0 is effectively "any non-zero number of pixels".</p>
    </dl>
   </div>
   <h2 class="heading settled dfn-paneled" data-dfn-type="dfn" data-level="3" data-lt="Processing Model" data-noexport id="intersection-observer-processing-model"><span class="secno">3. </span><span class="content"> Processing Model</span></h2>
   <p>This section outlines the steps the user agent must take when implementing
the <a data-link-type="dfn" href="#intersection-observer" id="ref-for-intersection-observer">Intersection Observer</a> API.</p>
   <h3 class="heading settled" data-level="3.1" id="defines"><span class="secno">3.1. </span><span class="content"> Internal Slot Definitions</span><a class="self-link" href="#defines"></a></h3>
   <h4 class="heading settled" data-level="3.1.1" id="document-defines"><span class="secno">3.1.1. </span><span class="content"> Document</span><a class="self-link" href="#document-defines"></a></h4>
   <p>Each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object①">Document</a> has an <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-noexport id="document-intersectionobservertaskqueued">IntersectionObserverTaskQueued</dfn> flag
which is initialized to false.</p>
   <h4 class="heading settled" data-level="3.1.2" id="element-private-slots"><span class="secno">3.1.2. </span><span class="content"> Element</span><a class="self-link" href="#element-private-slots"></a></h4>
   <p><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑧">Element</a></code> objects have an internal <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-registeredintersectionobservers-slot"><code>[[RegisteredIntersectionObservers]]</code></dfn> slot,
which is initialized to an empty list.
This list holds <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="intersectionobserverregistration"><code>IntersectionObserverRegistration</code></dfn> records,
which have an <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverRegistration" data-dfn-type="attribute" data-export id="dom-intersectionobserverregistration-observer"><code>observer</code></dfn> property
holding an <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⑤">IntersectionObserver</a></code>, a <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverRegistration" data-dfn-type="attribute" data-export id="dom-intersectionobserverregistration-previousthresholdindex"><code>previousThresholdIndex</code></dfn> property
holding a number between -1 and the length of the observer’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds①">thresholds</a></code> property (inclusive), and
a <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserverRegistration" data-dfn-type="attribute" data-export id="dom-intersectionobserverregistration-previousisintersecting"><code>previousIsIntersecting</code></dfn> property holding a boolean.</p>
   <h4 class="heading settled" data-level="3.1.3" id="intersection-observer-private-slots"><span class="secno">3.1.3. </span><span class="content"> IntersectionObserver</span><a class="self-link" href="#intersection-observer-private-slots"></a></h4>
   <p><code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⑥">IntersectionObserver</a></code> objects have internal <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-queuedentries-slot"><code>[[QueuedEntries]]</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-observationtargets-slot"><code>[[ObservationTargets]]</code></dfn> slots,
which are initialized to empty lists and an internal <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-callback-slot"><code>[[callback]]</code></dfn> slot
which is initialized by <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-intersectionobserver" id="ref-for-dom-intersectionobserver-intersectionobserver①">IntersectionObserver(callback, options)</a></code>.
They also have an internal <dfn class="dfn-paneled idl-code" data-dfn-for="IntersectionObserver" data-dfn-type="attribute" data-export id="dom-intersectionobserver-rootmargin-slot"><code>[[rootMargin]]</code></dfn> slot
which is a list of four pixel lengths or percentages.</p>
   <h3 class="heading settled" data-level="3.2" id="algorithms"><span class="secno">3.2. </span><span class="content"> Algorithms</span><a class="self-link" href="#algorithms"></a></h3>
   <h4 class="heading settled" data-level="3.2.1" id="queue-intersection-observer-task"><span class="secno">3.2.1. </span><span class="content"> Queue an Intersection Observer Task</span><a class="self-link" href="#queue-intersection-observer-task"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="queue-an-intersection-observer-task">queue an intersection observer task</dfn> for a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object②">Document</a> <var>document</var>,
run these steps:</p>
   <ol>
    <li data-md>
     <p>If <var>document</var>’s <a data-link-type="dfn" href="#document-intersectionobservertaskqueued" id="ref-for-document-intersectionobservertaskqueued">IntersectionObserverTaskQueued</a> flag is set to true,
return.</p>
    <li data-md>
     <p>Set <var>document</var>’s <a data-link-type="dfn" href="#document-intersectionobservertaskqueued" id="ref-for-document-intersectionobservertaskqueued①">IntersectionObserverTaskQueued</a> flag to true.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object③">document</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop①">event loop</a> to <a data-link-type="dfn" href="#notify-intersection-observers" id="ref-for-notify-intersection-observers">notify intersection observers</a>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.2.2" id="notify-intersection-observers-algo"><span class="secno">3.2.2. </span><span class="content"> Notify Intersection Observers</span><a class="self-link" href="#notify-intersection-observers-algo"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="notify-intersection-observers">notify intersection observers</dfn> for a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object④">Document</a> <var>document</var>,
run these steps:</p>
   <ol>
    <li data-md>
     <p>Set <var>document</var>’s <a data-link-type="dfn" href="#document-intersectionobservertaskqueued" id="ref-for-document-intersectionobservertaskqueued②">IntersectionObserverTaskQueued</a> flag to false.</p>
    <li data-md>
     <p>Let <var>notify list</var> be a list of all <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⑦">IntersectionObserver</a></code>s
whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root⑨">root</a></code> is in the DOM tree of <var>document</var>.</p>
    <li data-md>
     <p>For each <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⑧">IntersectionObserver</a></code> object <var>observer</var> in <var>notify list</var>,
run these steps:</p>
     <ol>
      <li data-md>
       <p>If <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot②">[[QueuedEntries]]</a></code> slot is empty,
continue.</p>
      <li data-md>
       <p>Let <var>queue</var> be a copy of <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot③">[[QueuedEntries]]</a></code> slot.</p>
      <li data-md>
       <p>Clear <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot④">[[QueuedEntries]]</a></code> slot.</p>
      <li data-md>
       <p>Invoke <var>callback</var> with <var>queue</var> as the first argument and <var>observer</var> as the second argument and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#dfn-callback-this-value" id="ref-for-dfn-callback-this-value">callback this value</a>.
If this throws an exception, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception" id="ref-for-report-the-exception">report the exception</a>.</p>
     </ol>
   </ol>
   <h4 class="heading settled" data-level="3.2.3" id="queue-intersection-observer-entry-algo"><span class="secno">3.2.3. </span><span class="content"> Queue an IntersectionObserverEntry</span><a class="self-link" href="#queue-intersection-observer-entry-algo"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="queue-an-intersectionobserverentry">queue an IntersectionObserverEntry</dfn> for an <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver①⑨">IntersectionObserver</a></code> <var>observer</var>, given a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object⑤">Document</a> <var>document</var>; <code class="idl"><a data-link-type="idl" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp④">DOMHighResTimeStamp</a></code> <var>time</var>; <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect">DOMRect</a></code>s <var>rootBounds</var>, <var>boundingClientRect</var>, <var>intersectionRect</var>, and <var>isIntersecting</var> flag;
and an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑨">Element</a></code> <var>target</var>;
run these steps:</p>
   <ol>
    <li data-md>
     <p>Construct an <code class="idl"><a data-link-type="idl" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry④">IntersectionObserverEntry</a></code>, passing in <var>time</var>, <var>rootBounds</var>, <var>boundingClientRect</var>, <var>intersectionRect</var>, <var>isIntersecting</var>, and <var>target</var>.</p>
    <li data-md>
     <p>Append it to <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-queuedentries-slot" id="ref-for-dom-intersectionobserver-queuedentries-slot⑤">[[QueuedEntries]]</a></code> slot.</p>
    <li data-md>
     <p><a data-link-type="dfn" href="#queue-an-intersection-observer-task" id="ref-for-queue-an-intersection-observer-task">Queue an intersection observer task</a> for <var>document</var>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.2.4" id="calculate-intersection-rect-algo"><span class="secno">3.2.4. </span><span class="content"> Compute the Intersection of a Target Element and the Root</span><a class="self-link" href="#calculate-intersection-rect-algo"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="compute-the-intersection">compute the intersection</dfn> between a <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target⑨">target</a> and the observer’s <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①④">intersection root</a>,
run these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>intersectionRect</var> be the result of running the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect③">getBoundingClientRect()</a></code> algorithm on the <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target①⓪">target</a>.</p>
    <li data-md>
     <p>Let <var>container</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box/#containing-block" id="ref-for-containing-block">containing block</a> of the <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target①①">target</a>.</p>
    <li data-md>
     <p>While <var>container</var> is not the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⑤">intersection root</a>:</p>
     <ol>
      <li data-md>
       <p>Map <var>intersectionRect</var> to the coordinate space of <var>container</var>.</p>
      <li data-md>
       <p>If <var>container</var> has overflow clipping or a css <a data-link-type="dfn" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path" id="ref-for-propdef-clip-path">clip-path</a> property,
update <var>intersectionRect</var> by applying <var>container</var>’s clip.</p>
      <li data-md>
       <p>If <var>container</var> is the root element of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts①">nested browsing context</a>,
update <var>container</var> to be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container">browsing context container</a> of <var>container</var>,
and update <var>intersectionRect</var> by clipping to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box/#viewport" id="ref-for-viewport①">viewport</a> of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts②">nested browsing context</a>.
Otherwise, update <var>container</var> to be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box/#containing-block" id="ref-for-containing-block①">containing block</a> of <var>container</var>.</p>
     </ol>
    <li data-md>
     <p>Map <var>intersectionRect</var> to the coordinate space of the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⑥">intersection root</a>.</p>
    <li data-md>
     <p>Update <var>intersectionRect</var> by intersecting it with the <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle④">root intersection rectangle</a>.</p>
    <li data-md>
     <p>Map <var>intersectionRect</var> to the coordinate space of the viewport of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object⑥">Document</a> containing the <a data-link-type="dfn" href="#intersectionobserver-target" id="ref-for-intersectionobserver-target①②">target</a>.</p>
   </ol>
   <h4 class="heading settled" data-level="3.2.5" id="update-intersection-observations-algo"><span class="secno">3.2.5. </span><span class="content"> Run the Update Intersection Observations Steps</span><a class="self-link" href="#update-intersection-observations-algo"></a></h4>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="run-the-update-intersection-observations-steps">run the update intersection observations steps</dfn> for a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object⑦">Document</a> <var>document</var> given a timestamp <var>time</var>, run these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>observer list</var> be a list of all <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver②⓪">IntersectionObserver</a></code>s
whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root①⓪">root</a></code> is in the DOM tree of <var>document</var>.</p>
    <li data-md>
     <p>For each <var>observer</var> in <var>observer list</var>:</p>
     <ol>
      <li data-md>
       <p>Let <var>rootBounds</var> be <var>observer</var>’s <a data-link-type="dfn" href="#intersectionobserver-root-intersection-rectangle" id="ref-for-intersectionobserver-root-intersection-rectangle⑤">root intersection rectangle</a>.</p>
      <li data-md>
       <p>For each <var>target</var> in <var>observer</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observationtargets-slot" id="ref-for-dom-intersectionobserver-observationtargets-slot⑤">[[ObservationTargets]]</a></code> slot, processed in the same order that <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-observe" id="ref-for-dom-intersectionobserver-observe③">observe()</a></code> was called on each <var>target</var>:</p>
       <ol>
        <li data-md>
         <p>If the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⑦">intersection root</a> is not the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root④">implicit root</a> and <var>target</var> is not a descendant of the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⑧">intersection root</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display/#containing-block-chain" id="ref-for-containing-block-chain①">containing block chain</a>,
skip further processing for <var>target</var>.</p>
        <li data-md>
         <p>If the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root①⑨">intersection root</a> is not the <a data-link-type="dfn" href="#intersectionobserver-implicit-root" id="ref-for-intersectionobserver-implicit-root⑤">implicit root</a>,
and <var>target</var> is not in the same <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object⑧">Document</a> as the <a data-link-type="dfn" href="#intersectionobserver-intersection-root" id="ref-for-intersectionobserver-intersection-root②⓪">intersection root</a>,
skip further processing for <var>target</var>.</p>
        <li data-md>
         <p>Let <var>targetRect</var> be a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly⑦">DOMRectReadOnly</a></code> obtained
by running the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect④">getBoundingClientRect()</a></code> algorithm on <var>target</var>.</p>
        <li data-md>
         <p>Let <var>intersectionRect</var> be the result of running the <a data-link-type="dfn" href="#compute-the-intersection" id="ref-for-compute-the-intersection">compute the intersection</a> algorithm on <var>target</var>.</p>
        <li data-md>
         <p>Let <var>targetArea</var> be <var>targetRect</var>’s area.</p>
        <li data-md>
         <p>Let <var>intersectionArea</var> be <var>intersectionRect</var>’s area.</p>
        <li data-md>
         <p>Let <var>isIntersecting</var> be true if <var>targetRect</var> and <var>rootBounds</var> intersect or are edge-adjacent,
even if the intersection has zero area (because <var>rootBounds</var> or <var>targetRect</var> have
zero area); otherwise, let <var>isIntersecting</var> be false.</p>
        <li data-md>
         <p>If <var>targetArea</var> is non-zero, let <var>intersectionRatio</var> be <var>intersectionArea</var> divided by <var>targetArea</var>.<br> Otherwise, let <var>intersectionRatio</var> be <code>1</code> if <var>isIntersecting</var> is true, or <code>0</code> if <var>isIntersecting</var> is false.</p>
        <li data-md>
         <p>Let <var>thresholdIndex</var> be the index of the first entry in <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds②">thresholds</a></code> whose value is greater than <var>intersectionRatio</var>, or the length of <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds③">thresholds</a></code> if <var>intersectionRatio</var> is greater than or equal to the last entry in <var>observer</var>.<code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds④">thresholds</a></code>.</p>
        <li data-md>
         <p>Let <var>intersectionObserverRegistration</var> be the <code class="idl"><a data-link-type="idl" href="#intersectionobserverregistration" id="ref-for-intersectionobserverregistration③">IntersectionObserverRegistration</a></code> record
in <var>target</var>’s internal <code class="idl"><a data-link-type="idl" href="#dom-element-registeredintersectionobservers-slot" id="ref-for-dom-element-registeredintersectionobservers-slot③">[[RegisteredIntersectionObservers]]</a></code> slot
whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-observer" id="ref-for-dom-intersectionobserverregistration-observer③">observer</a></code> property is equal to <var>observer</var>.</p>
        <li data-md>
         <p>Let <var>previousThresholdIndex</var> be the <var>intersectionObserverRegistration</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousthresholdindex" id="ref-for-dom-intersectionobserverregistration-previousthresholdindex①">previousThresholdIndex</a></code> property.</p>
        <li data-md>
         <p>Let <var>previousIsIntersecting</var> be the <var>intersectionObserverRegistration</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousisintersecting" id="ref-for-dom-intersectionobserverregistration-previousisintersecting①">previousIsIntersecting</a></code> property.</p>
        <li data-md>
         <p>If <var>thresholdIndex</var> does not equal <var>previousThresholdIndex</var> or if <var>isIntersecting</var> does not equal <var>previousIsIntersecting</var>, <a data-link-type="dfn" href="#queue-an-intersectionobserverentry" id="ref-for-queue-an-intersectionobserverentry">queue an IntersectionObserverEntry</a>,
passing in <var>observer</var>, <var>time</var>, <var>rootBounds</var>, <var>boundingClientRect</var>, <var>intersectionRect</var>, <var>isIntersecting</var>, and <var>target</var>.</p>
        <li data-md>
         <p>Assign <var>threshold</var> to <var>intersectionObserverRegistration</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousthresholdindex" id="ref-for-dom-intersectionobserverregistration-previousthresholdindex②">previousThresholdIndex</a></code> property.</p>
        <li data-md>
         <p>Assign <var>isIntersecting</var> to <var>intersectionObserverRegistration</var>’s <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserverregistration-previousisintersecting" id="ref-for-dom-intersectionobserverregistration-previousisintersecting②">previousIsIntersecting</a></code> property.</p>
       </ol>
     </ol>
   </ol>
   <h3 class="heading settled" data-level="3.3" id="lifetime"><span class="secno">3.3. </span><span class="content"> IntersectionObserver Lifetime</span><a class="self-link" href="#lifetime"></a></h3>
   <p>An <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver②①">IntersectionObserver</a></code> will remain alive until both of these conditions hold:</p>
   <ul>
    <li>There are no scripting references to the observer.
    <li>The observer is not observing any targets. 
   </ul>
   <p>An <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver②②">IntersectionObserver</a></code> will continue observing a target until either <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-unobserve" id="ref-for-dom-intersectionobserver-unobserve③">unobserve(target)</a></code> is called on the target, or <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-disconnect" id="ref-for-dom-intersectionobserver-disconnect②">disconnect()</a></code> is called on the observer.</p>
   <h3 class="heading settled" data-level="3.4" id="external-spec-integrations"><span class="secno">3.4. </span><span class="content"> External Spec Integrations</span><a class="self-link" href="#external-spec-integrations"></a></h3>
   <h4 class="heading settled" data-level="3.4.1" id="event-loop"><span class="secno">3.4.1. </span><span class="content"> HTML Processing Model: Event Loop</span><a class="self-link" href="#event-loop"></a></h4>
   <p>An <a data-link-type="dfn" href="#intersection-observer" id="ref-for-intersection-observer①">Intersection Observer</a> processing step should take place
during the "<i>Update the rendering</i>" steps,
after step 10, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#run-the-animation-frame-callbacks" id="ref-for-run-the-animation-frame-callbacks">run the animation frame callbacks</a>,
in the in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8" id="ref-for-processing-model-8">HTML Processing Model</a>.</p>
   <p>This step is:</p>
   <ol start="10">
    <li>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active">fully active</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object⑨">Document</a> in <var>docs</var>, <a data-link-type="dfn" href="#run-the-update-intersection-observations-steps" id="ref-for-run-the-update-intersection-observations-steps">Run the update intersection observations steps</a> for each <code class="idl"><a data-link-type="idl" href="#intersectionobserver" id="ref-for-intersectionobserver②③">IntersectionObserver</a></code> whose <code class="idl"><a data-link-type="idl" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root①①">root</a></code> is in the DOMtree of that <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-document-object" id="ref-for-the-document-object①⓪">Document</a>.
   </ol>
   <h2 class="heading settled" data-level="4" id="acknowledgements"><span class="secno">4. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Special thanks to <a href="https://github.com/w3c/IntersectionObserver/graphs/contributors">all the contributors</a> for their technical input and suggestions that led to improvements to this
specification.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <h3 class="no-ref no-num heading settled" id="conventions"><span class="content">Document conventions</span><a class="self-link" href="#conventions"></a></h3>
   <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
   <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
   <div class="example" id="example-ae2b6bc0">
    <a class="self-link" href="#example-ae2b6bc0"></a> 
    <p>This is an example of an informative example.</p>
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note">Note, this is an informative note.</p>
   <h3 class="no-ref no-num heading settled" id="conformant-algorithms"><span class="content">Conformant Algorithms</span><a class="self-link" href="#conformant-algorithms"></a></h3>
   <p>Requirements phrased in the imperative as part of algorithms (such as
    "strip any leading space characters" or "return false and abort these
    steps") are to be interpreted with the meaning of the key word ("must",
    "should", "may", etc) used in introducing the algorithm.</p>
   <p>Conformance requirements phrased as algorithms or specific steps can be
    implemented in any manner, so long as the end result is equivalent. In
    particular, the algorithms defined in this specification are intended to
    be easy to understand and are not intended to be performant. Implementers
    are encouraged to optimize.</p>
  </div>
  <p id="back-to-top" role="navigation"><a href="#toc"><abbr title="Back to top">↑</abbr></a></p>
  . 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li>
    boundingClientRect
    <ul>
     <li><a href="#dom-intersectionobserverentry-boundingclientrect">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-boundingclientrect">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#dom-intersectionobserver-callback-slot">[[callback]]</a><span>, in §3.1.3</span>
   <li><a href="#compute-the-intersection">compute the intersection</a><span>, in §3.2.4</span>
   <li><a href="#dom-intersectionobserver-disconnect">disconnect()</a><span>, in §2.2</span>
   <li><a href="#intersectionobserver-implicit-root">implicit root</a><span>, in §2.2</span>
   <li><a href="#intersectionobserver">IntersectionObserver</a><span>, in §2.2</span>
   <li><a href="#intersection-observer">Intersection Observer</a><span>, in §2</span>
   <li><a href="#callbackdef-intersectionobservercallback">IntersectionObserverCallback</a><span>, in §2.1</span>
   <li><a href="#dom-intersectionobserver-intersectionobserver">IntersectionObserver(callback)</a><span>, in §2.2</span>
   <li><a href="#dom-intersectionobserver-intersectionobserver">IntersectionObserver(callback, options)</a><span>, in §2.2</span>
   <li><a href="#intersectionobserverentry">IntersectionObserverEntry</a><span>, in §2.3</span>
   <li><a href="#dictdef-intersectionobserverentryinit">IntersectionObserverEntryInit</a><span>, in §2.3</span>
   <li><a href="#dom-intersectionobserverentry-intersectionobserverentry">IntersectionObserverEntry(intersectionObserverEntryInit)</a><span>, in §2.3</span>
   <li><a href="#dictdef-intersectionobserverinit">IntersectionObserverInit</a><span>, in §2.4</span>
   <li><a href="#intersectionobserverregistration">IntersectionObserverRegistration</a><span>, in §3.1.2</span>
   <li><a href="#document-intersectionobservertaskqueued">IntersectionObserverTaskQueued</a><span>, in §3.1.1</span>
   <li>
    intersectionRatio
    <ul>
     <li><a href="#dom-intersectionobserverentry-intersectionratio">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-intersectionratio">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li>
    intersectionRect
    <ul>
     <li><a href="#dom-intersectionobserverentry-intersectionrect">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-intersectionrect">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#intersectionobserver-intersection-root">intersection root</a><span>, in §2.2</span>
   <li>
    isIntersecting
    <ul>
     <li><a href="#dom-intersectionobserverentry-isintersecting">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-isintersecting">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#notify-intersection-observers">notify intersection observers</a><span>, in §3.2.2</span>
   <li><a href="#dom-intersectionobserver-observationtargets-slot">[[ObservationTargets]]</a><span>, in §3.1.3</span>
   <li><a href="#dom-intersectionobserverregistration-observer">observer</a><span>, in §3.1.2</span>
   <li><a href="#dom-intersectionobserver-observe">observe(target)</a><span>, in §2.2</span>
   <li><a href="#parse-a-root-margin">parse a root margin</a><span>, in §2.2</span>
   <li><a href="#dom-intersectionobserverregistration-previousisintersecting">previousIsIntersecting</a><span>, in §3.1.2</span>
   <li><a href="#dom-intersectionobserverregistration-previousthresholdindex">previousThresholdIndex</a><span>, in §3.1.2</span>
   <li><a href="#intersection-observer-processing-model">Processing Model</a><span>, in §2.4</span>
   <li><a href="#queue-an-intersectionobserverentry">queue an IntersectionObserverEntry</a><span>, in §3.2.3</span>
   <li><a href="#queue-an-intersection-observer-task">queue an intersection observer task</a><span>, in §3.2.1</span>
   <li><a href="#dom-intersectionobserver-queuedentries-slot">[[QueuedEntries]]</a><span>, in §3.1.3</span>
   <li><a href="#dom-element-registeredintersectionobservers-slot">[[RegisteredIntersectionObservers]]</a><span>, in §3.1.2</span>
   <li>
    root
    <ul>
     <li><a href="#dom-intersectionobserver-root">attribute for IntersectionObserver</a><span>, in §2.2</span>
     <li><a href="#dom-intersectionobserverinit-root">dict-member for IntersectionObserverInit</a><span>, in §2.4</span>
    </ul>
   <li>
    rootBounds
    <ul>
     <li><a href="#dom-intersectionobserverentry-rootbounds">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-rootbounds">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#intersectionobserver-root-intersection-rectangle">root intersection rectangle</a><span>, in §2.2</span>
   <li>
    rootMargin
    <ul>
     <li><a href="#dom-intersectionobserver-rootmargin">attribute for IntersectionObserver</a><span>, in §2.2</span>
     <li><a href="#dom-intersectionobserverinit-rootmargin">dict-member for IntersectionObserverInit</a><span>, in §2.4</span>
    </ul>
   <li><a href="#dom-intersectionobserver-rootmargin-slot">[[rootMargin]]</a><span>, in §3.1.3</span>
   <li><a href="#run-the-update-intersection-observations-steps">run the update intersection observations steps</a><span>, in §3.2.5</span>
   <li><a href="#dom-intersectionobserver-takerecords">takeRecords()</a><span>, in §2.2</span>
   <li>
    target
    <ul>
     <li><a href="#dom-intersectionobserverentry-target">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#intersectionobserver-target">dfn for IntersectionObserver</a><span>, in §2</span>
     <li><a href="#dom-intersectionobserverentryinit-target">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#dom-intersectionobserverinit-threshold">threshold</a><span>, in §2.4</span>
   <li><a href="#dom-intersectionobserver-thresholds">thresholds</a><span>, in §2.2</span>
   <li>
    time
    <ul>
     <li><a href="#dom-intersectionobserverentry-time">attribute for IntersectionObserverEntry</a><span>, in §2.3</span>
     <li><a href="#dom-intersectionobserverentryinit-time">dict-member for IntersectionObserverEntryInit</a><span>, in §2.3</span>
    </ul>
   <li><a href="#dom-intersectionobserver-unobserve">unobserve(target)</a><span>, in §2.2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-margin">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin">https://drafts.csswg.org/css-box-3/#propdef-margin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-propdef-margin①">2.4. 
The IntersectionObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-parse-a-list-of-component-values">
   <a href="https://drafts.csswg.org/css-syntax-3/#parse-a-list-of-component-values">https://drafts.csswg.org/css-syntax-3/#parse-a-list-of-component-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-list-of-component-values">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-absolute-length">
   <a href="https://drafts.csswg.org/css-values-3/#absolute-length">https://drafts.csswg.org/css-values-3/#absolute-length</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolute-length">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-absolute-length①">2.4. 
The IntersectionObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dimension">
   <a href="https://drafts.csswg.org/css-values-3/#dimension">https://drafts.csswg.org/css-values-3/#dimension</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dimension">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-element-getboundingclientrect">
   <a href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect">https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-getboundingclientrect">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect①">2.3. 
The IntersectionObserverEntry interface</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect②">2.4. 
The IntersectionObserverInit dictionary</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect③">3.2.4. 
Compute the Intersection of a Target Element and the Root</a>
    <li><a href="#ref-for-dom-element-getboundingclientrect④">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-element①">(2)</a> <a href="#ref-for-element②">(3)</a> <a href="#ref-for-element③">(4)</a> <a href="#ref-for-element④">(5)</a> <a href="#ref-for-element⑤">(6)</a> <a href="#ref-for-element⑥">(7)</a> <a href="#ref-for-element⑦">(8)</a> <a href="#ref-for-element⑧">(9)</a> <a href="#ref-for-element⑨">(10)</a> <a href="#ref-for-element①⓪">(11)</a> <a href="#ref-for-element①①">(12)</a>
    <li><a href="#ref-for-element①②">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-element①③">(2)</a> <a href="#ref-for-element①④">(3)</a> <a href="#ref-for-element①⑤">(4)</a>
    <li><a href="#ref-for-element①⑥">2.4. 
The IntersectionObserverInit dictionary</a> <a href="#ref-for-element①⑦">(2)</a>
    <li><a href="#ref-for-element①⑧">3.1.2. 
Element</a>
    <li><a href="#ref-for-element①⑨">3.2.3. 
Queue an IntersectionObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mutationobserver">
   <a href="https://dom.spec.whatwg.org/#mutationobserver">https://dom.spec.whatwg.org/#mutationobserver</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mutationobserver">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-mutationobserver①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-mutationobserverinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-mutationobserverinit">https://dom.spec.whatwg.org/#dictdef-mutationobserverinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mutationobserverinit">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-node">
   <a href="https://dom.spec.whatwg.org/#node">https://dom.spec.whatwg.org/#node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-node">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-mutationobserver-observe">
   <a href="https://dom.spec.whatwg.org/#dom-mutationobserver-observe">https://dom.spec.whatwg.org/#dom-mutationobserver-observe</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mutationobserver-observe">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrect">
   <a href="https://drafts.fxtf.org/geometry-1/#domrect">https://drafts.fxtf.org/geometry-1/#domrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrect">3.2.3. 
Queue an IntersectionObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-domrectinit">
   <a href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit">https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-domrectinit">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dictdef-domrectinit①">(2)</a> <a href="#ref-for-dictdef-domrectinit②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://drafts.fxtf.org/geometry-1/#domrectreadonly">https://drafts.fxtf.org/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-domrectreadonly①">(2)</a> <a href="#ref-for-domrectreadonly②">(3)</a> <a href="#ref-for-domrectreadonly③">(4)</a> <a href="#ref-for-domrectreadonly④">(5)</a> <a href="#ref-for-domrectreadonly⑤">(6)</a> <a href="#ref-for-domrectreadonly⑥">(7)</a>
    <li><a href="#ref-for-domrectreadonly⑦">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">2.4. 
The IntersectionObserverInit dictionary</a> <a href="#ref-for-idl-DOMString③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-idl-boolean①">(2)</a> <a href="#ref-for-idl-boolean②">(3)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin" style="color:initial">margin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-parse-a-list-of-component-values" style="color:initial">parse a list of component values</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
     <li><span class="dfn-paneled" id="term-for-absolute-length" style="color:initial">absolute length</span>
     <li><span class="dfn-paneled" id="term-for-dimension" style="color:initial">dimension</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-element-getboundingclientrect" style="color:initial">getBoundingClientRect()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-mutationobserver" style="color:initial">MutationObserver</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-mutationobserverinit" style="color:initial">MutationObserverInit</span>
     <li><span class="dfn-paneled" id="term-for-node" style="color:initial">Node</span>
     <li><span class="dfn-paneled" id="term-for-dom-mutationobserver-observe" style="color:initial">observe(target)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrect" style="color:initial">DOMRect</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-domrectinit" style="color:initial">DOMRectInit</span>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>callback</c-> <a href="#callbackdef-intersectionobservercallback"><code><c- g>IntersectionObserverCallback</c-></code></a> = <c- b>void</c-> (<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry⑤"><c- n>IntersectionObserverEntry</c-></a>> <a href="#dom-intersectionobservercallback-entries"><code><c- g>entries</c-></code></a>, <a class="n" data-link-type="idl-name" href="#intersectionobserver" id="ref-for-intersectionobserver②④"><c- n>IntersectionObserver</c-></a> <a href="#dom-intersectionobservercallback-observer"><code><c- g>observer</c-></code></a>);

[<a class="idl-code" data-link-type="constructor" href="#dom-intersectionobserver-intersectionobserver" id="ref-for-dom-intersectionobserver-intersectionobserver②"><c- g>Constructor</c-></a>(<a class="n" data-link-type="idl-name" href="#callbackdef-intersectionobservercallback" id="ref-for-callbackdef-intersectionobservercallback①"><c- n>IntersectionObserverCallback</c-></a> <a href="#dom-intersectionobserver-intersectionobserver-callback-options-callback"><code><c- g>callback</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-intersectionobserverinit" id="ref-for-dictdef-intersectionobserverinit①"><c- n>IntersectionObserverInit</c-></a> <a href="#dom-intersectionobserver-intersectionobserver-callback-options-options"><code><c- g>options</c-></code></a>),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#intersectionobserver"><code><c- g>IntersectionObserver</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥①"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-intersectionobserver-root" id="ref-for-dom-intersectionobserver-root③①"><c- g>root</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-intersectionobserver-rootmargin" id="ref-for-dom-intersectionobserver-rootmargin④"><c- g>rootMargin</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦"><c- b>double</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<double>" href="#dom-intersectionobserver-thresholds" id="ref-for-dom-intersectionobserver-thresholds⑤"><c- g>thresholds</c-></a>;
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-observe" id="ref-for-dom-intersectionobserver-observe①①"><c- g>observe</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦①"><c- n>Element</c-></a> <a href="#dom-intersectionobserver-observe-target-target"><code><c- g>target</c-></code></a>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-unobserve" id="ref-for-dom-intersectionobserver-unobserve④"><c- g>unobserve</c-></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧①"><c- n>Element</c-></a> <a href="#dom-intersectionobserver-unobserve-target-target"><code><c- g>target</c-></code></a>);
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-disconnect" id="ref-for-dom-intersectionobserver-disconnect③"><c- g>disconnect</c-></a>();
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#intersectionobserverentry" id="ref-for-intersectionobserverentry①①"><c- n>IntersectionObserverEntry</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-intersectionobserver-takerecords" id="ref-for-dom-intersectionobserver-takerecords①"><c- g>takeRecords</c-></a>();
};

[<a href="#dom-intersectionobserverentry-intersectionobserverentry"><code><c- g>Constructor</c-></code></a>(<a class="n" data-link-type="idl-name" href="#dictdef-intersectionobserverentryinit" id="ref-for-dictdef-intersectionobserverentryinit①"><c- n>IntersectionObserverEntryInit</c-></a> <a href="#dom-intersectionobserverentry-intersectionobserverentry-intersectionobserverentryinit-intersectionobserverentryinit"><code><c- g>intersectionObserverEntryInit</c-></code></a>)]
<c- b>interface</c-> <a href="#intersectionobserverentry"><code><c- g>IntersectionObserverEntry</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp⑤"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-intersectionobserverentry-time" id="ref-for-dom-intersectionobserverentry-time①"><c- g>time</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly⑧"><c- n>DOMRectReadOnly</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly?" href="#dom-intersectionobserverentry-rootbounds" id="ref-for-dom-intersectionobserverentry-rootbounds①"><c- g>rootBounds</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-intersectionobserverentry-boundingclientrect" id="ref-for-dom-intersectionobserverentry-boundingclientrect⑥"><c- g>boundingClientRect</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-intersectionobserverentry-intersectionrect" id="ref-for-dom-intersectionobserverentry-intersectionrect③"><c- g>intersectionRect</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-intersectionobserverentry-isintersecting" id="ref-for-dom-intersectionobserverentry-isintersecting②"><c- g>isIntersecting</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-intersectionobserverentry-intersectionratio" id="ref-for-dom-intersectionobserverentry-intersectionratio①"><c- g>intersectionRatio</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element" href="#dom-intersectionobserverentry-target" id="ref-for-dom-intersectionobserverentry-target⑥"><c- g>target</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-intersectionobserverentryinit"><code><c- g>IntersectionObserverEntryInit</c-></code></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="http://www.w3.org/TR/hr-time/#domhighrestimestamp" id="ref-for-domhighrestimestamp①①"><c- n>DOMHighResTimeStamp</c-></a> <a data-type="DOMHighResTimeStamp " href="#dom-intersectionobserverentryinit-time"><code><c- g>time</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit③"><c- n>DOMRectInit</c-></a>? <a data-type="DOMRectInit? " href="#dom-intersectionobserverentryinit-rootbounds"><code><c- g>rootBounds</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①①"><c- n>DOMRectInit</c-></a> <a data-type="DOMRectInit " href="#dom-intersectionobserverentryinit-boundingclientrect"><code><c- g>boundingClientRect</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domrectinit" id="ref-for-dictdef-domrectinit②①"><c- n>DOMRectInit</c-></a> <a data-type="DOMRectInit " href="#dom-intersectionobserverentryinit-intersectionrect"><code><c- g>intersectionRect</c-></code></a>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a data-type="boolean " href="#dom-intersectionobserverentryinit-isintersecting"><code><c- g>isIntersecting</c-></code></a>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <a data-type="double " href="#dom-intersectionobserverentryinit-intersectionratio"><code><c- g>intersectionRatio</c-></code></a>;
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①③①"><c- n>Element</c-></a> <a data-type="Element " href="#dom-intersectionobserverentryinit-target"><code><c- g>target</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-intersectionobserverinit"><code><c- g>IntersectionObserverInit</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⑥①"><c- n>Element</c-></a>?  <a class="idl-code" data-default="null" data-link-type="dict-member" data-type="Element?  " href="#dom-intersectionobserverinit-root" id="ref-for-dom-intersectionobserverinit-root①"><c- g>root</c-></a> = <c- b>null</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;0px&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-intersectionobserverinit-rootmargin" id="ref-for-dom-intersectionobserverinit-rootmargin③①"><c- g>rootMargin</c-></a> = "0px";
  (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥①"><c- b>double</c-></a>>) <a class="idl-code" data-default="0" data-link-type="dict-member" data-type="(double or sequence<double>) " href="#dom-intersectionobserverinit-threshold" id="ref-for-dom-intersectionobserverinit-threshold②①"><c- g>threshold</c-></a> = 0;
};

</pre>
  <aside class="dfn-panel" data-for="intersection-observer">
   <b><a href="#intersection-observer">#intersection-observer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersection-observer">3. 
Processing Model</a>
    <li><a href="#ref-for-intersection-observer①">3.4.1. 
HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserver-target">
   <b><a href="#intersectionobserver-target">#intersectionobserver-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver-target">2.1. 
The IntersectionObserverCallback</a>
    <li><a href="#ref-for-intersectionobserver-target①">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-intersectionobserver-target②">(2)</a> <a href="#ref-for-intersectionobserver-target③">(3)</a> <a href="#ref-for-intersectionobserver-target④">(4)</a> <a href="#ref-for-intersectionobserver-target⑤">(5)</a> <a href="#ref-for-intersectionobserver-target⑥">(6)</a> <a href="#ref-for-intersectionobserver-target⑦">(7)</a>
    <li><a href="#ref-for-intersectionobserver-target⑧">2.4. 
The IntersectionObserverInit dictionary</a>
    <li><a href="#ref-for-intersectionobserver-target⑨">3.2.4. 
Compute the Intersection of a Target Element and the Root</a> <a href="#ref-for-intersectionobserver-target①⓪">(2)</a> <a href="#ref-for-intersectionobserver-target①①">(3)</a> <a href="#ref-for-intersectionobserver-target①②">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-intersectionobservercallback">
   <b><a href="#callbackdef-intersectionobservercallback">#callbackdef-intersectionobservercallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-intersectionobservercallback">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserver">
   <b><a href="#intersectionobserver">#intersectionobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver">2.1. 
The IntersectionObserverCallback</a>
    <li><a href="#ref-for-intersectionobserver①">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-intersectionobserver②">(2)</a> <a href="#ref-for-intersectionobserver③">(3)</a> <a href="#ref-for-intersectionobserver④">(4)</a> <a href="#ref-for-intersectionobserver⑤">(5)</a> <a href="#ref-for-intersectionobserver⑥">(6)</a> <a href="#ref-for-intersectionobserver⑦">(7)</a> <a href="#ref-for-intersectionobserver⑧">(8)</a> <a href="#ref-for-intersectionobserver⑨">(9)</a> <a href="#ref-for-intersectionobserver①⓪">(10)</a> <a href="#ref-for-intersectionobserver①①">(11)</a> <a href="#ref-for-intersectionobserver①②">(12)</a> <a href="#ref-for-intersectionobserver①③">(13)</a> <a href="#ref-for-intersectionobserver①④">(14)</a>
    <li><a href="#ref-for-intersectionobserver①⑤">3.1.2. 
Element</a>
    <li><a href="#ref-for-intersectionobserver①⑥">3.1.3. 
IntersectionObserver</a>
    <li><a href="#ref-for-intersectionobserver①⑦">3.2.2. 
Notify Intersection Observers</a> <a href="#ref-for-intersectionobserver①⑧">(2)</a>
    <li><a href="#ref-for-intersectionobserver①⑨">3.2.3. 
Queue an IntersectionObserverEntry</a>
    <li><a href="#ref-for-intersectionobserver②⓪">3.2.5. 
Run the Update Intersection Observations Steps</a>
    <li><a href="#ref-for-intersectionobserver②①">3.3. 
IntersectionObserver Lifetime</a> <a href="#ref-for-intersectionobserver②②">(2)</a>
    <li><a href="#ref-for-intersectionobserver②③">3.4.1. 
HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-intersectionobserver">
   <b><a href="#dom-intersectionobserver-intersectionobserver">#dom-intersectionobserver-intersectionobserver</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-intersectionobserver">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-dom-intersectionobserver-intersectionobserver①">3.1.3. 
IntersectionObserver</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-observe">
   <b><a href="#dom-intersectionobserver-observe">#dom-intersectionobserver-observe</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-observe">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-observe①">(2)</a> <a href="#ref-for-dom-intersectionobserver-observe②">(3)</a>
    <li><a href="#ref-for-dom-intersectionobserver-observe③">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-unobserve">
   <b><a href="#dom-intersectionobserver-unobserve">#dom-intersectionobserver-unobserve</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-unobserve">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-unobserve①">(2)</a> <a href="#ref-for-dom-intersectionobserver-unobserve②">(3)</a>
    <li><a href="#ref-for-dom-intersectionobserver-unobserve③">3.3. 
IntersectionObserver Lifetime</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-disconnect">
   <b><a href="#dom-intersectionobserver-disconnect">#dom-intersectionobserver-disconnect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-disconnect">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-disconnect①">(2)</a>
    <li><a href="#ref-for-dom-intersectionobserver-disconnect②">3.3. 
IntersectionObserver Lifetime</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-takerecords">
   <b><a href="#dom-intersectionobserver-takerecords">#dom-intersectionobserver-takerecords</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-takerecords">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-root">
   <b><a href="#dom-intersectionobserver-root">#dom-intersectionobserver-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-root">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-root①">(2)</a> <a href="#ref-for-dom-intersectionobserver-root②">(3)</a> <a href="#ref-for-dom-intersectionobserver-root③">(4)</a> <a href="#ref-for-dom-intersectionobserver-root④">(5)</a> <a href="#ref-for-dom-intersectionobserver-root⑤">(6)</a> <a href="#ref-for-dom-intersectionobserver-root⑥">(7)</a>
    <li><a href="#ref-for-dom-intersectionobserver-root⑦">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dom-intersectionobserver-root⑧">(2)</a>
    <li><a href="#ref-for-dom-intersectionobserver-root⑨">3.2.2. 
Notify Intersection Observers</a>
    <li><a href="#ref-for-dom-intersectionobserver-root①⓪">3.2.5. 
Run the Update Intersection Observations Steps</a>
    <li><a href="#ref-for-dom-intersectionobserver-root①①">3.4.1. 
HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-rootmargin">
   <b><a href="#dom-intersectionobserver-rootmargin">#dom-intersectionobserver-rootmargin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-rootmargin">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-rootmargin①">(2)</a> <a href="#ref-for-dom-intersectionobserver-rootmargin②">(3)</a> <a href="#ref-for-dom-intersectionobserver-rootmargin③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-thresholds">
   <b><a href="#dom-intersectionobserver-thresholds">#dom-intersectionobserver-thresholds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-thresholds">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-dom-intersectionobserver-thresholds①">3.1.2. 
Element</a>
    <li><a href="#ref-for-dom-intersectionobserver-thresholds②">3.2.5. 
Run the Update Intersection Observations Steps</a> <a href="#ref-for-dom-intersectionobserver-thresholds③">(2)</a> <a href="#ref-for-dom-intersectionobserver-thresholds④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserver-intersection-root">
   <b><a href="#intersectionobserver-intersection-root">#intersectionobserver-intersection-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver-intersection-root">2. Intersection Observer</a>
    <li><a href="#ref-for-intersectionobserver-intersection-root①">2.1. 
The IntersectionObserverCallback</a>
    <li><a href="#ref-for-intersectionobserver-intersection-root②">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-intersectionobserver-intersection-root③">(2)</a> <a href="#ref-for-intersectionobserver-intersection-root④">(3)</a> <a href="#ref-for-intersectionobserver-intersection-root⑤">(4)</a> <a href="#ref-for-intersectionobserver-intersection-root⑥">(5)</a> <a href="#ref-for-intersectionobserver-intersection-root⑦">(6)</a> <a href="#ref-for-intersectionobserver-intersection-root⑧">(7)</a> <a href="#ref-for-intersectionobserver-intersection-root⑨">(8)</a> <a href="#ref-for-intersectionobserver-intersection-root①⓪">(9)</a>
    <li><a href="#ref-for-intersectionobserver-intersection-root①①">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-intersectionobserver-intersection-root①②">(2)</a> <a href="#ref-for-intersectionobserver-intersection-root①③">(3)</a>
    <li><a href="#ref-for-intersectionobserver-intersection-root①④">3.2.4. 
Compute the Intersection of a Target Element and the Root</a> <a href="#ref-for-intersectionobserver-intersection-root①⑤">(2)</a> <a href="#ref-for-intersectionobserver-intersection-root①⑥">(3)</a>
    <li><a href="#ref-for-intersectionobserver-intersection-root①⑦">3.2.5. 
Run the Update Intersection Observations Steps</a> <a href="#ref-for-intersectionobserver-intersection-root①⑧">(2)</a> <a href="#ref-for-intersectionobserver-intersection-root①⑨">(3)</a> <a href="#ref-for-intersectionobserver-intersection-root②⓪">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserver-implicit-root">
   <b><a href="#intersectionobserver-implicit-root">#intersectionobserver-implicit-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver-implicit-root">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-intersectionobserver-implicit-root①">(2)</a> <a href="#ref-for-intersectionobserver-implicit-root②">(3)</a>
    <li><a href="#ref-for-intersectionobserver-implicit-root③">2.4. 
The IntersectionObserverInit dictionary</a>
    <li><a href="#ref-for-intersectionobserver-implicit-root④">3.2.5. 
Run the Update Intersection Observations Steps</a> <a href="#ref-for-intersectionobserver-implicit-root⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserver-root-intersection-rectangle">
   <b><a href="#intersectionobserver-root-intersection-rectangle">#intersectionobserver-root-intersection-rectangle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserver-root-intersection-rectangle">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-intersectionobserver-root-intersection-rectangle①">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-intersectionobserver-root-intersection-rectangle②">(2)</a> <a href="#ref-for-intersectionobserver-root-intersection-rectangle③">(3)</a>
    <li><a href="#ref-for-intersectionobserver-root-intersection-rectangle④">3.2.4. 
Compute the Intersection of a Target Element and the Root</a>
    <li><a href="#ref-for-intersectionobserver-root-intersection-rectangle⑤">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parse-a-root-margin">
   <b><a href="#parse-a-root-margin">#parse-a-root-margin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-root-margin">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserverentry">
   <b><a href="#intersectionobserverentry">#intersectionobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserverentry">2.1. 
The IntersectionObserverCallback</a>
    <li><a href="#ref-for-intersectionobserverentry①">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-intersectionobserverentry②">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-intersectionobserverentry③">(2)</a>
    <li><a href="#ref-for-intersectionobserverentry④">3.2.3. 
Queue an IntersectionObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-intersectionobserverentryinit">
   <b><a href="#dictdef-intersectionobserverentryinit">#dictdef-intersectionobserverentryinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-intersectionobserverentryinit">2.3. 
The IntersectionObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-boundingclientrect">
   <b><a href="#dom-intersectionobserverentry-boundingclientrect">#dom-intersectionobserverentry-boundingclientrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-boundingclientrect">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dom-intersectionobserverentry-boundingclientrect①">(2)</a> <a href="#ref-for-dom-intersectionobserverentry-boundingclientrect②">(3)</a> <a href="#ref-for-dom-intersectionobserverentry-boundingclientrect③">(4)</a> <a href="#ref-for-dom-intersectionobserverentry-boundingclientrect④">(5)</a> <a href="#ref-for-dom-intersectionobserverentry-boundingclientrect⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-intersectionrect">
   <b><a href="#dom-intersectionobserverentry-intersectionrect">#dom-intersectionobserverentry-intersectionrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-intersectionrect">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dom-intersectionobserverentry-intersectionrect①">(2)</a> <a href="#ref-for-dom-intersectionobserverentry-intersectionrect②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-isintersecting">
   <b><a href="#dom-intersectionobserverentry-isintersecting">#dom-intersectionobserverentry-isintersecting</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-isintersecting">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dom-intersectionobserverentry-isintersecting①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-intersectionratio">
   <b><a href="#dom-intersectionobserverentry-intersectionratio">#dom-intersectionobserverentry-intersectionratio</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-intersectionratio">2.3. 
The IntersectionObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-rootbounds">
   <b><a href="#dom-intersectionobserverentry-rootbounds">#dom-intersectionobserverentry-rootbounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-rootbounds">2.3. 
The IntersectionObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-target">
   <b><a href="#dom-intersectionobserverentry-target">#dom-intersectionobserverentry-target</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-target">2.3. 
The IntersectionObserverEntry interface</a> <a href="#ref-for-dom-intersectionobserverentry-target①">(2)</a> <a href="#ref-for-dom-intersectionobserverentry-target②">(3)</a> <a href="#ref-for-dom-intersectionobserverentry-target③">(4)</a> <a href="#ref-for-dom-intersectionobserverentry-target④">(5)</a> <a href="#ref-for-dom-intersectionobserverentry-target⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverentry-time">
   <b><a href="#dom-intersectionobserverentry-time">#dom-intersectionobserverentry-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverentry-time">2.3. 
The IntersectionObserverEntry interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-intersectionobserverinit">
   <b><a href="#dictdef-intersectionobserverinit">#dictdef-intersectionobserverinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-intersectionobserverinit">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverinit-root">
   <b><a href="#dom-intersectionobserverinit-root">#dom-intersectionobserverinit-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverinit-root">2.4. 
The IntersectionObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverinit-rootmargin">
   <b><a href="#dom-intersectionobserverinit-rootmargin">#dom-intersectionobserverinit-rootmargin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverinit-rootmargin">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserverinit-rootmargin①">(2)</a> <a href="#ref-for-dom-intersectionobserverinit-rootmargin②">(3)</a>
    <li><a href="#ref-for-dom-intersectionobserverinit-rootmargin③">2.4. 
The IntersectionObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverinit-threshold">
   <b><a href="#dom-intersectionobserverinit-threshold">#dom-intersectionobserverinit-threshold</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverinit-threshold">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserverinit-threshold①">(2)</a>
    <li><a href="#ref-for-dom-intersectionobserverinit-threshold②">2.4. 
The IntersectionObserverInit dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersection-observer-processing-model">
   <b><a href="#intersection-observer-processing-model">#intersection-observer-processing-model</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersection-observer-processing-model">2.1. 
The IntersectionObserverCallback</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-intersectionobservertaskqueued">
   <b><a href="#document-intersectionobservertaskqueued">#document-intersectionobservertaskqueued</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-intersectionobservertaskqueued">3.2.1. 
Queue an Intersection Observer Task</a> <a href="#ref-for-document-intersectionobservertaskqueued①">(2)</a>
    <li><a href="#ref-for-document-intersectionobservertaskqueued②">3.2.2. 
Notify Intersection Observers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-element-registeredintersectionobservers-slot">
   <b><a href="#dom-element-registeredintersectionobservers-slot">#dom-element-registeredintersectionobservers-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-registeredintersectionobservers-slot">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-element-registeredintersectionobservers-slot①">(2)</a> <a href="#ref-for-dom-element-registeredintersectionobservers-slot②">(3)</a>
    <li><a href="#ref-for-dom-element-registeredintersectionobservers-slot③">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="intersectionobserverregistration">
   <b><a href="#intersectionobserverregistration">#intersectionobserverregistration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intersectionobserverregistration">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-intersectionobserverregistration①">(2)</a> <a href="#ref-for-intersectionobserverregistration②">(3)</a>
    <li><a href="#ref-for-intersectionobserverregistration③">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverregistration-observer">
   <b><a href="#dom-intersectionobserverregistration-observer">#dom-intersectionobserverregistration-observer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverregistration-observer">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserverregistration-observer①">(2)</a> <a href="#ref-for-dom-intersectionobserverregistration-observer②">(3)</a>
    <li><a href="#ref-for-dom-intersectionobserverregistration-observer③">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverregistration-previousthresholdindex">
   <b><a href="#dom-intersectionobserverregistration-previousthresholdindex">#dom-intersectionobserverregistration-previousthresholdindex</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverregistration-previousthresholdindex">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-dom-intersectionobserverregistration-previousthresholdindex①">3.2.5. 
Run the Update Intersection Observations Steps</a> <a href="#ref-for-dom-intersectionobserverregistration-previousthresholdindex②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserverregistration-previousisintersecting">
   <b><a href="#dom-intersectionobserverregistration-previousisintersecting">#dom-intersectionobserverregistration-previousisintersecting</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserverregistration-previousisintersecting">2.2. 
The IntersectionObserver interface</a>
    <li><a href="#ref-for-dom-intersectionobserverregistration-previousisintersecting①">3.2.5. 
Run the Update Intersection Observations Steps</a> <a href="#ref-for-dom-intersectionobserverregistration-previousisintersecting②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-queuedentries-slot">
   <b><a href="#dom-intersectionobserver-queuedentries-slot">#dom-intersectionobserver-queuedentries-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-queuedentries-slot">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-queuedentries-slot①">(2)</a>
    <li><a href="#ref-for-dom-intersectionobserver-queuedentries-slot②">3.2.2. 
Notify Intersection Observers</a> <a href="#ref-for-dom-intersectionobserver-queuedentries-slot③">(2)</a> <a href="#ref-for-dom-intersectionobserver-queuedentries-slot④">(3)</a>
    <li><a href="#ref-for-dom-intersectionobserver-queuedentries-slot⑤">3.2.3. 
Queue an IntersectionObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-observationtargets-slot">
   <b><a href="#dom-intersectionobserver-observationtargets-slot">#dom-intersectionobserver-observationtargets-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-observationtargets-slot">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-observationtargets-slot①">(2)</a> <a href="#ref-for-dom-intersectionobserver-observationtargets-slot②">(3)</a> <a href="#ref-for-dom-intersectionobserver-observationtargets-slot③">(4)</a> <a href="#ref-for-dom-intersectionobserver-observationtargets-slot④">(5)</a>
    <li><a href="#ref-for-dom-intersectionobserver-observationtargets-slot⑤">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-callback-slot">
   <b><a href="#dom-intersectionobserver-callback-slot">#dom-intersectionobserver-callback-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-callback-slot">2.2. 
The IntersectionObserver interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-intersectionobserver-rootmargin-slot">
   <b><a href="#dom-intersectionobserver-rootmargin-slot">#dom-intersectionobserver-rootmargin-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-intersectionobserver-rootmargin-slot">2.2. 
The IntersectionObserver interface</a> <a href="#ref-for-dom-intersectionobserver-rootmargin-slot①">(2)</a> <a href="#ref-for-dom-intersectionobserver-rootmargin-slot②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="queue-an-intersection-observer-task">
   <b><a href="#queue-an-intersection-observer-task">#queue-an-intersection-observer-task</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-an-intersection-observer-task">3.2.3. 
Queue an IntersectionObserverEntry</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="notify-intersection-observers">
   <b><a href="#notify-intersection-observers">#notify-intersection-observers</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notify-intersection-observers">3.2.1. 
Queue an Intersection Observer Task</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="queue-an-intersectionobserverentry">
   <b><a href="#queue-an-intersectionobserverentry">#queue-an-intersectionobserverentry</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-an-intersectionobserverentry">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="compute-the-intersection">
   <b><a href="#compute-the-intersection">#compute-the-intersection</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compute-the-intersection">3.2.5. 
Run the Update Intersection Observations Steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="run-the-update-intersection-observations-steps">
   <b><a href="#run-the-update-intersection-observations-steps">#run-the-update-intersection-observations-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-the-update-intersection-observations-steps">3.4.1. 
HTML Processing Model: Event Loop</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>